<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>服务器IP监控面板</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/x-icon">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/x-icon">

    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
	<!-- <h1 class="mb-4 text-center">服务器IP监控面板</h1> -->
	<h1 class="mb-4 text-center ultimate-title">服务器IP监控面板</h1>

<!-- 优化后的筛选控件行 bootstrap默认一行布局为12等份, 比如6个col-2 -->
<div class="row mb-3 gx-2 flex-nowrap overflow-auto">  <!-- 添加滚动条防止溢出 -->
  <!-- 搜索框 (20%宽度) -->
  <div class="col-2">
    <input type="text" id="searchInput" class="form-control" 
           placeholder="输入IP进行搜索...">
  </div>

  <!-- 全部机器类型筛选 (15%宽度) -->
  <div class="col-2">
    <select class="form-select filter-select" id="serverTypeFilter">
      <option value="">机器类型</option>
    </select>
  </div>

  <!-- 状态筛选 (15%宽度) -->
  <div class="col-1">
    <select id="statusFilter" class="form-select">
      <option value="">状态</option>
      <!-- <option value="在线">在线</option> -->
      <!-- <option value="离线">离线</option> -->
    </select>
  </div>

  <!-- 架构筛选 (15%宽度) -->
  <div class="col-1">
    <select class="form-select filter-select" id="archFilter">
      <option value="">架构</option>
    </select>
  </div>

  <!-- 系统筛选 (15%宽度) -->
  <div class="col-1">
    <select class="form-select filter-select" id="osFilter">
      <option value="">操作系统</option>
    </select>
  </div>

  <!-- 编译器筛选 (15%宽度) -->
  <div class="col-1">
    <select class="form-select filter-select" id="compilerFilter">
      <option value="">编译器</option>
    </select>
  </div>

  <!-- 编译器筛选 (15%宽度) -->
  <div class="col-1">
    <select class="form-select filter-select" id="kernelFilter">
      <option value="">内核</option>
    </select>
  </div>

  <!-- 位置筛选 -->
  <div class="col-1">
    <select class="form-select filter-select" id="locationFilter">
      <option value="">位置</option>
    </select>
  </div>

  <!-- 清除按钮 (10%宽度) -->
  <div class="col-2">
    <button id="clearFilter" class="btn btn-outline-danger w-100">
      <i class="bi bi-eraser me-2"></i>清除筛选
    </button>
  </div>
</div>

        <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th>IP</th>
                        <th>机器类型</th>
                        <th>状态</th>
                        <th>架构</th>
                        <th>操作系统</th>
                        <th>编译器</th>
                        <th>内核</th>
                        <th>位置</th>
                        <th>资产编号</th>
                        <th>更新时间</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for server in servers %}
                    <tr>
                        <td>{{ server.ip_address }}</td>
                        <td>{{ server.server_type or 'N/A' }}</td>
                        <td>
                            <span class="badge rounded-pill bg-{{ 'success' if server.status else 'danger' }}">
                                {{ '在线' if server.status else '离线' }}
                            </span>
                        </td>
                        <td>{{ server.arch or 'N/A' }}</td>
                        <td>{{ server.os or 'N/A' }}</td>
                        <td>{{ server.compiler or 'N/A' }}</td>
                        <td>{{ server.kernel }}</td>
                        <td>{{ server.location }}</td>
                        <td>{{ server.number }}</td>
                        <td>{{ server.last_updated.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>{{ server.note }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 自动刷新脚本 -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>

<script>
$(document).ready(function(){
    // 动态填充筛选选项
    function initFilters() {
        const uniqueValues = (selector) => {
            return [...new Set($('tbody tr').map(function() {
                return $(this).find(selector).text().trim();
            }).get())].filter(Boolean).sort();
        }

        $('#serverTypeFilter').append(uniqueValues('td:eq(1)').map(v => `<option value="${v}">${v}</option>`));
        $('#statusFilter').append(uniqueValues('td:eq(2)').map(v => `<option value="${v}">${v}</option>`));
        $('#archFilter').append(uniqueValues('td:eq(3)').map(v => `<option value="${v}">${v}</option>`));
        $('#osFilter').append(uniqueValues('td:eq(4)').map(v => `<option value="${v}">${v}</option>`));
        $('#compilerFilter').append(uniqueValues('td:eq(5)').map(v => `<option value="${v}">${v}</option>`));
        $('#kernelFilter').append(uniqueValues('td:eq(6)').map(v => `<option value="${v}">${v}</option>`));
        $('#locationFilter').append(uniqueValues('td:eq(7)').map(v => `<option value="${v}">${v}</option>`));
    }

    // 增强筛选函数（修正索引）
    function filterServers() {
        const filters = {
            search: $('#searchInput').val().toLowerCase(),
            status: $('#statusFilter').val(),
            os: $('#osFilter').val(),
            arch: $('#archFilter').val(),
            compiler: $('#compilerFilter').val(),
            serverType: $('#serverTypeFilter').val(),
            kernel: $('#kernelFilter').val(),
            location: $('#locationFilter').val()
        };

        $('tbody tr').each(function() {
            const $row = $(this);
            const cells = {
                server_type: $row.find('td:eq(0)').text().toLowerCase(),
                status: $row.find('.badge').text().trim(),
                arch: $row.find('td:eq(3)').text().trim(),
                os: $row.find('td:eq(4)').text().trim(),
                compiler: $row.find('td:eq(5)').text().trim(),
                serverType: $row.find('td:eq(1)').text().trim(),
                kernel: $row.find('td:eq(6)').text().trim(),
                location: $row.find('td:eq(7)').text().trim()
            };

            const matchAll = [
                cells.server_type.includes(filters.search),
                !filters.status || cells.status === filters.status,
                !filters.arch || cells.arch === filters.arch,
                !filters.os || cells.os === filters.os,
                !filters.compiler || cells.compiler === filters.compiler,
                !filters.serverType || cells.serverType === filters.serverType,
                !filters.kernel || cells.kernel === filters.kernel,
                !filters.location || cells.location === filters.location
            ].every(Boolean);

            $row.toggle(matchAll);
        });
    }

    // 初始化
    initFilters();
    $('#searchInput, .filter-select, #statusFilter').on('input change', filterServers);

    // 清除功能
    $('#clearFilter').click(function() {
        $('#searchInput').val('');
        $('.filter-select, #statusFilter').val('');
        filterServers();
    });

    setInterval(() => location.reload(), 300000);
});
</script>

<!-- 新增固定页脚 -->
<footer class="app-footer">
  <div class="version-info">
    <span class="version-label">版本：</span>
    <span id="git-version" class="version-value">{{ git_version }}</span>
    <span class="version-label">by 刘汉旭</span>
  </div>
</footer>

</body>

</html>

